<template>
  <div>
    <!-- begin breadcrumb -->
    <ol class="breadcrumb">
      <li>
        <router-link to="/erc/homepage/ERCHomePageControl">首页</router-link>
      </li>
      <li>
        <a href="javascript:;">项目管理</a>
      </li>
      <li class="active">项目客户信息录入</li>
    </ol>
    <!-- end breadcrumb -->
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-inverse">
          <div class="panel-heading">
            <div class="panel-heading-btn">
              <a
                href="javascript:;"
                class="btn btn-xs btn-icon btn-circle btn-default"
                data-click="panel-expand"
              >
                <i class="fa fa-expand"></i>
              </a>
            </div>
            <h4 class="panel-title">项目客户信息列表</h4>
          </div>
          <div class="panel-toolbar">
            <div class="form-inline" role="form">
              <div class="form-group">
                <div class="form-group">
                  <input
                    class="form-control"
                    id="search_name"
                    v-model="queryParams.full_name"
                    placeholder="客戶名称"
                  />
                </div>
                <div class="form-group">
                  <input
                    class="form-control"
                    id="search_address"
                    v-model="queryParams.address"
                    placeholder="客户地址"
                  />
                </div>
                <div class="form-group">
                  <input
                    class="form-control"
                    id="phone_number"
                    v-model="queryParams.phone_number"
                    placeholder="客户电话"
                  />
                </div>
                <div class="form-group">
                  <button id="searchCreateList" class="btn btn-info" v-on:click="queryConfirm">
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </div>
              <div class="form-group pull-right">
                <button id="showCreateModal" class="btn btn-info" v-on:click="showCreateModal">增加</button>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div class="tab-content">
              <div class="tab-pane fade active in">
                <table id="listTable"></table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="AddModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">{{modalTitle}}</h4>
          </div>
          <form @submit.prevent="submitMod" id="formModal">
            <div class="modal-body">
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户工商登记证号
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.business_registration_number"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户全称
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.full_name"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户地址
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.address"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户联系电话
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.phone_number"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>销售客户适用税率
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.tax_rate"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>法人代表
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.legal_representative"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>法人联络手机
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.legal_representative_phone"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">法人微信号</label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.legal_representative_wecat"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户指定联络人
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.designated_contact_name"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="6"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">
                    <span class="table-required">*</span>客户指定联络人手机
                  </label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.designated_contact_phone"
                      data-parsley-required="true"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">客户指定联络人微信</label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.designated_contact_wecat"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-4 control-label">客户指定联络人QQ</label>
                  <div class="col-sm-8">
                    <input
                      class="form-control"
                      v-model="workRow.designated_contact_qq"
                      maxlength="50"
                      data-parsley-maxlength="50"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-info" @click="modelFlag='1'" id="addButton">保存</button>
              <button type="submit" class="btn btn-info" @click="modelFlag='2'" id="updateButton">修改</button>
            </div>
            <!--<div id="textEditor" style="height: 300px;"><p>请输入内容...</p></div>-->
          </form>
        </div>
      </div>
    </div>
    <UserSelectModal ref="userModal" :multiFlag="1" />
  </div>
</template>
<script>
import Vue from "vue";
const common = require("commonFunc");
const  apiUrl = "/api/erc/projectmanage/ERCProjectCustomerControl?method=";

import UserSelectModal from "../../../components/common/UserSelectModal.vue";

export default {
  data: function() {
    return {
      pagePara: {},
      workRow: {},
      isEdit: false,
      modalTitle: "增加-项目客户信息",
      modelFlag: "",
      queryParams: {},
      eventHub: new Vue()
    };
  },
  name: "ERCProjectCustomerControl",
  components: {
    UserSelectModal
  },
  mounted: function() {
    let _self = this;
    let $listTable = $("#listTable");

    //行操作按钮
    function operateFormatter(value, row, index) {
      let r = "";

      r = [
        '<a class="btn btn-info btn-xs m-r-5 edit_detail">修改</a>',
        '<a class="btn btn-info btn-xs m-r-5 delete_info">删除</a>'
      ].join("");

      return r;
    }
    //行操作按钮对应函数
    window.tableEvents = {
      "click .finish": async function(e, value, row, index) {
        let url=apiUrl+"finish";
        try {
          await _self.$http.post(url,{project_customer_id:row.project_customer_id});
          $("#listTable").bootstrapTable("refresh");
        } catch (error) {
          common.dealErrorCommon(_self, error);
        }
      },
      "click .edit_detail": function(e, value, row, index) {
        _self.isEdit = true;
        _self.workRow = {};
        _self.workRow = row;
        _self.modalTitle = "修改-项目客户信息";
        _self.project_customer_id = _self.workRow.project_customer_id;

        $("#addButton").hide();
        $("#updateButton").show();
        $("#AddModal").modal("show");
      },
      "click .delete_info": async function(e, value, row, index) {
          common.rowDeleteWithApi(
            _self,
            "删除",
            apiUrl+"delete",
            $listTable,
            row,
            "project_customer_id",
            function() {}
          );
      }
    };
    //查询条件拼接
    function queryParamsFit(params) {
      // params.search_type = 'use_add';
      params.full_name = _self.queryParams.full_name;
      params.address = _self.queryParams.address;
      params.phone_number = _self.queryParams.phone_number;
      console.log(_self.queryParams.phone_number);
      return JSON.stringify(params);
    }

    //表格初始化
    function initFitOrderTable() {
      let columsArr = [
        common.BTRowFormatWithIndex("NO."),
        common.BTRowFormatAlignLeft(
          "business_registration_number",
          "客户工商登记证号"
        ),
        common.BTRowFormatAlignLeft("full_name", "客户全称"),
        common.BTRowFormatAlignLeft("address", "客户地址"),
        common.BTRowFormatAlignLeft("phone_number", "客户联系电话"),
        common.BTRowFormatAlignLeft("tax_rate", "销售客户适用税率"),
        common.BTRowFormatAlignLeft("legal_representative", "法人代表"),
        common.BTRowFormatAlignLeft(
          "legal_representative_phone",
          "法人联络手机"
        ),
		common.BTRowFormatAlignLeft(
		  "legal_representative_wecat",
		  "法人微信号"
		),
        common.BTRowFormatAlignLeft(
          "designated_contact_name",
          "客户指定联络人"
        ),
        common.BTRowFormatAlignLeft(
          "designated_contact_phone",
          "客户指定联络人手机"
        ),
        common.BTRowFormatAlignLeft(
          "designated_contact_wecat",
          "客户指定联络人微信"
        ),
        common.BTRowFormatAlignLeft(
          "designated_contact_qq",
          "客户指定联络人QQ"
        ),
        common.BTRowFormatWithFE("", "操作", operateFormatter, tableEvents)
      ];
      $listTable.bootstrapTable({
        method: "POST",
        url: apiUrl+"search",
        queryParams: queryParamsFit,
        sidePagination: "server",
        ajaxOptions: common.bootstrapTableAjaxOtions,
        responseHandler: function(res) {
          return res.info;
        },
        height: common.getTableHeight(),
        columns: columsArr,
        idField: "project_customer_id",
        uniqueId: "project_customer_id",
        striped: true,
        clickToSelect: true,
        showRefresh: false,
        pagination: true,
        pageSize: common.pageSize(),
        pageList: [10, 15, 25, 50, 100],
        locale: "zh-CN",
        onEditableShown: function(field, row, $el, editable) {
          _self.oldRow = $.extend(true, {}, row);
        },
        onEditableSave: function(field, row, oldValue, $el) {
          common.rowModifyWithT(
            _self,
            apiUrl+"modify",
            row,
            "project_customer_id",
            $listTable
          );
        }
      });
      common.changeTableClass($listTable);
    }
    //页面初始化
    async function initData() {
      let url=apiUrl+"init"
      let response = await _self.$http.post(url, {});
      // let retData = response.data.info;
      // _self.pagePara = JSON.parse(JSON.stringify(retData));

      initFitOrderTable();
      common.reSizeCall();
      $("#formModal").parsley();
    }

    $(async function() {
      await initData();
    });
  },
  methods: {
    selectOp: function(s) {
      console.log(s.target.value);
    },
    //人员选择回调
    onUserSelectCallback({ users }, event) {
      console.log('users',users);
      const [user] = users;
      if (user) {
        const { name, user_id } = user;
        this.$set(this.workRow, "keeper_name", name);
        this.workRow.keeper = user_id;
      }
    },
    queryConfirm() {
      console.log("refresh");
      $("#listTable").bootstrapTable("refresh");
    },
    showCreateModal() {
      this.workRow = {};
      $("#sealcreate_type_source")
        .val("")
        .trigger("change");
      //$('#sealcreate_type').select
      $("#updateButton").hide();
      $("#addButton").show();
      $("#AddModal").modal("show");
    },
    async submitMod() {
      console.log("aa");
      let _self = this;
      if (
        $("#formModal")
          .parsley()
          .isValid()
      ) {
        try {
          // this.workRow.start_time = $('#start_time').val();
          // this.workRow.end_time = $('#end_time').val();
          // this.workRow.meetingroom_id = common.getSelect2Val('meetingroom_id');
          _self.workRow.sealcreate_type = common.getSelect2Val(
            "sealcreate_type_source"
          );

          console.log("_self.workRow", _self.workRow);
          if (_self.modelFlag === "1") {
            let url=apiUrl+"add"
            this.$http.post(url, _self.workRow).then(
              response => {
                let retData = response.data.info;
                _self.workRow = {};
                common.dealSuccessCommon("提交成功");
                $("#listTable").bootstrapTable("refresh");
                this.workRow = {};
                console.log("add success");
                $("#formModal")
                  .parsley()
                  .reset();
                $("#AddModal").modal("hide");
              },
              response => {
                common.dealErrorCommon(this, response);
              }
            );
          }
          if (_self.modelFlag === "2") {
            console.log(_self.workRow);
            let url=apiUrl+"modify"
            this.$http.post(url, _self.workRow).then(
              response => {
                let retData = response.data.info;
                _self.workRow = {};
                common.dealSuccessCommon("修改成功");
                $("#listTable").bootstrapTable("refresh");
                this.workRow = {};
                console.log("modify success");
                $("#formModal")
                  .parsley()
                  .reset();
                $("#AddModal").modal("hide");
              },
              response => {
                common.dealErrorCommon(this, response);
              }
            );
          }
        } catch (error) {
          common.dealErrorCommon(this, error);
        }
      }
    },
  }
};
</script>
<style scoped>
textarea {
  width: 100%;
  resize: none;
}
</style>